<header id="header" class="clearfix">
  @if (app.isMobile()) {
    <nz-icon
      class="nav-phone-icon"
      nzType="unordered-list"
      nzPopoverOverlayClassName="popover-menu"
      nzPopoverPlacement="bottomLeft"
      nz-popover
      [nzPopoverContent]="menu"
    />
  }

  <div nz-row style="flex-flow: nowrap">
    <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6" [nzLg]="6" [nzXl]="5" [nzXXl]="4">
      <a href="/" id="logo">
        <img width="32" height="28.27" alt="logo" src="./assets/img/logo.svg" />
        <strong>NG-ZORRO</strong>
      </a>
    </div>
    <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="18" [nzLg]="18" [nzXl]="19" [nzXXl]="20" class="menu-row">
      <div app-searchbar (focusChange)="onFocusChange($event)"></div>
      @if (!app.isMobile()) {
        <ng-container [ngTemplateOutlet]="menu"></ng-container>
      }
    </div>
  </div>
</header>

<ng-template #menu>
  @if (!searching() || !app.responsive()) {
    <ul
      nz-menu
      app-navigation
      class="menu-site"
      [nzMode]="app.isMobile() ? 'inline' : 'horizontal'"
      [nzSelectable]="false"
      (languageChange)="toggleLanguage()"
    ></ul>

    @if (app.responsive() !== 'crowded') {
      <nz-select
        nzSize="small"
        nzVariant="filled"
        [style.max-width.px]="126"
        [style.min-width.px]="90"
        [nzOptions]="versions"
        [ngModel]="currentVersion"
        (ngModelChange)="navigateToVersion($event)"
      />
      <button
        id="language"
        nz-tooltip
        [nzTooltipTitle]="language() === 'en' ? 'English / 中文' : '中文 / English'"
        nzTooltipPlacement="bottom"
        nz-button
        nzSize="small"
        nzType="text"
        (click)="toggleLanguage()"
      >
        <span [class.active]="language() === 'zh'">中</span>
        <span [class.active]="language() === 'en'">En</span>
      </button>
      <button
        id="direction"
        [class]="dir()"
        nz-tooltip
        [nzTooltipTitle]="dir() | uppercase"
        nzTooltipPlacement="bottom"
        nz-button
        nzSize="small"
        nzType="text"
        (click)="toggleDirection()"
      >
        <nz-icon>
          <svg viewBox="0 0 20 20" width="20" height="20" fill="currentColor">
            <path
              d="m14.6961816 11.6470802.0841184.0726198 2 2c.2662727.2662727.2904793.682876.0726198.9764816l-.0726198.0841184-2 2c-.2929.2929-.7677.2929-1.0606 0-.2662727-.2662727-.2904793-.682876-.0726198-.9764816l.0726198-.0841184.7196-.7197h-10.6893c-.41421 0-.75-.3358-.75-.75 0-.3796833.28215688-.6934889.64823019-.7431531l.10176981-.0068469h10.6893l-.7196-.7197c-.2929-.2929-.2929-.7677 0-1.0606.2662727-.2662727.682876-.2904793.9764816-.0726198zm-8.1961616-8.6470802c.30667 0 .58246.18671.69635.47146l3.00003 7.50004c.1538.3845-.0333.821-.41784.9749-.38459.1538-.82107-.0333-.9749-.4179l-.81142-2.0285h-2.98445l-.81142 2.0285c-.15383.3846-.59031.5717-.9749.4179-.38458-.1539-.57165-.5904-.41781-.9749l3-7.50004c.1139-.28475.38968-.47146.69636-.47146zm8.1961616 1.14705264.0841184.07261736 2 2c.2662727.26626364.2904793.68293223.0726198.97654222l-.0726198.08411778-2 2c-.2929.29289-.7677.29289-1.0606 0-.2662727-.26626364-.2904793-.68293223-.0726198-.97654222l.0726198-.08411778.7196-.7196675h-3.6893c-.4142 0-.75-.3357925-.75-.7500025 0-.3796925.2821653-.69348832.6482323-.74315087l.1017677-.00684663h3.6893l-.7196-.7196725c-.2929-.29289-.2929-.76777 0-1.06066.2662727-.26626364.682876-.29046942.9764816-.07261736zm-8.1961616 1.62238736-.89223 2.23056h1.78445z"></path>
          </svg>
        </nz-icon>
      </button>
      <app-github-btn />
    }
  }
</ng-template>
